<template>
    <div class="menu">
        <el-menu
        active-text-color="#ffd04b"
        background-color="#112f50"
        class="el-menu-vertical-demo"
        :default-active="$route.path"      
        text-color="#fff"
        router
        :default-openeds="openeds" 
      >
      <el-menu-item >
          <div class="aiting"></div>
          <span>爱听原产地系统</span>
        </el-menu-item>

        <el-sub-menu index="/Home">
          <template #title>    
            <div class="aiting2"></div>      
            <span>电台管理</span>
          </template>  
            <el-menu-item index="/Home/radioAndProgram"><el-icon><UploadFilled /></el-icon>电台与节目管理</el-menu-item>
            <el-menu-item index="/Home/dailyRadioAndProgram"><el-icon><DocumentAdd /></el-icon>每日电台与节目管理</el-menu-item> 
            <el-menu-item index="/Home/dailyRadioAndProduct"><el-icon><DocumentAdd /></el-icon>每日电台与主品管理</el-menu-item> 
            <!-- <el-menu-item index="/outside/Secondary">二级表管理</el-menu-item> 
            <el-menu-item index="/outside/MediaSales">媒体销量管理</el-menu-item>  -->
        </el-sub-menu>

        <el-sub-menu index="/outside">
          <template #title>    
            <div class="aiting3"></div>      
            <span>报表管理</span>
          </template>  
            <el-menu-item index="/outside/Order"><el-icon><UploadFilled /></el-icon>明细表管理</el-menu-item>
            <el-menu-item index="/graphical/radioTop"><el-icon><DocumentAdd /></el-icon>节目TOP排名管理</el-menu-item> 
            <!-- <el-menu-item index="/outside/Secondary">二级表管理</el-menu-item> 
            <el-menu-item index="/outside/MediaSales">媒体销量管理</el-menu-item>  -->
        </el-sub-menu>

        <el-sub-menu index="/graphical">
          <template #title>     
            <div class="aiting4"></div>     
            <span>图表管理</span>
          </template>  
            <el-menu-item index="/graphical/totalSales"><el-icon><Monitor /></el-icon>销售额排名</el-menu-item> 
            <el-menu-item index="/graphical/floatingline"><el-icon><PictureFilled /></el-icon>每日飘线排名</el-menu-item> 
        </el-sub-menu>
     
      
      </el-menu>
    </div>
    </template>
    
    <script>


      export default {
        data(){
          return{
            openeds: ['/Home', '/outside', '/graphical'],//默认展开导航栏
          }
        },
    methods: {
      handleOpen(key, keyPath) {
        console.log(key, keyPath);
      },
      handleClose(key, keyPath) {
        console.log(key, keyPath);
      }
    }
  }
    </script>
    
    <style scoped>
    .el-menu{
        border-right: 0px;
    }
    .is-active{
        background: #1e78bf;
        color: #fff;
    }
    .el-menu-item{
        text-align: center;
    }
    .el-sub-menu__title{
        text-align: center;
    }
    body, hr, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, textarea, blockquote, p {
  padding: 0;
  margin: 0;
}

/*列表样式消除*/

ol, ul, li {
  list-style: none;
}
.aiting{
    width: 23px;
    height: 23px;
    border-radius: 20%;
    background-image: url('../assets/444.png');  
    background-size:cover;
    margin-right: 6px;
}
.aiting2{
    width: 22px;
    height: 25px;
    border-radius: 10%;
    background-image: url('../assets/555.png');  
    background-size:cover;
    margin-right: 6px;
}
.aiting3{
    width: 24px;
    height: 24px;
    border-radius: 20%;
    background-image: url('../assets/777.jpg');  
    background-size:cover;
    margin-right: 6px;
   
}
.aiting4{
   width: 24px;
    height: 24px;
    /* border-radius: 20%; */
    background-image: url('../assets/666.png');  
    background-size:cover;
    margin-right: 6px;
  
}
    </style>